{include file="top.tpl"}
	
		<!-- styles needed by jScrollPane - include in your own sites -->
		<link type="text/css" href="{$WPATH}css/scroll/jquery.jscrollpane.css" rel="stylesheet" media="all" />
		<!-- the styles for the lozenge theme -->
		<link type="text/css" href="{$WPATH}css/scroll/jquery.jscrollpane.lozenge.css" rel="stylesheet" media="all" />
<!-- latest jQuery direct from google's CDN -->
		<script type="text/javascript" src="{$WPATH}js/scroll/jquery.min.js"></script>
		<!-- the mousewheel plugin -->
		<script type="text/javascript" src="{$WPATH}js/scroll/jquery.mousewheel.js"></script>
		<!-- the jScrollPane script -->
		<script type="text/javascript" src="{$WPATH}js/scroll/jquery.jscrollpane.min.js"></script>
		<!-- scripts specific to this demo site -->

		<script type="text/javascript" id="sourcecode">
		{literal}
			$(function()
			{
				$('.scroll-pane').jScrollPane(
					{
						showArrows: true,
						horizontalGutter: 5
					}
				);
			});
			{/literal}
		</script>
		<style type="text/css" id="page-css">
			/* Styles specific to this particular page */
			{literal}
			.scroll-pane
			{
				width: 270px;
			height: 310px;
				overflow: auto;
			}
			{/literal}
		</style>    
    
		
        <link rel="stylesheet" type="text/css" href="{$WPATH}css/reset.css" />
 <link rel="stylesheet" type="text/css" href="{$WPATH}css/style.css" />
  <link rel="stylesheet" type="text/css" href="{$WPATH}js/slider/themes/default/jquery.slider.css" />
  
	<script type="text/javascript" src="{$WPATH}js/slider/jquery.slider.min.js"></script>

  <script type="text/javascript">
  {literal}
    jQuery(document).ready(function($) {
      $(".slider").slideshow({
        width      : 540,
        height     : 340,
		selector	:false,
		slideshow : false,
        transition : 'explode'
      });
	  
	  $(".caption").fadeIn(500);

      // playing with events:
      
      $(".slider").bind("sliderChange", function(event, curSlide) {
        $(curSlide).children(".caption").hide();
      });
      
      $(".slider").bind("sliderTransitionFinishes", function(event, curSlide) {
        $(curSlide).children(".caption").fadeIn(500);
      });
    });
	{/literal}
  </script>
        
        
    <div class="topmenufone">
    	<span style="font-size:13px">SION - VALAIS - SUISSE</span><br />
        Tel: ++41 27 322 55 60 - ++41 27 322 56 70
    </div>
    <div class="fr-content">
    	<div class="fr-menu-left">
        	<div class="fr-menu-right">
            	{include file="topmenu.tpl"}     
       		</div>
       	</div>
            {include file="form-search.tpl"} 
            
            
            <div class="fr-banner-photos">
            	<div class="fr-content-photos">
                 	<div class="slider">
                    {foreach name=photos from=$LISTPHTOTOS key=k item=item}
                      <div  class="{cycle values=,jquery-slider-trans-exploderandom}">
                      	<div class="caption">
                          <h4>{$item.title}</h4>
                        </div>
                        <img src="{$item.picture}" alt="" width="540px"/>
                      </div>
                    {/foreach}  
                    </div>	 
              	</div>
            </div>
            <div class="icon-page">
			{include file="linkbottom.tpl"}
            </div>
        	<div class="fr-rightside-photos">
            	<div class="title-main-page-photos">
                	Photos
                </div>
            	<div class="fr-photos-list">
                	<div  id="pane1" class="scroll-pane">
                    {foreach name=album from=$LISTALBUM key=k item=item}	
                     	<div class="fr-one-photos">
                        	<div class="list-one-photos">
               		    		<a href="{$WPATH}photos/{$k}"><img src="{$item.thumbnail}" alt="{$item.title}" ></a>
                        	</div>
                            <div class="name-active"><a href="{$WPATH}photos/{$k}">{$item.title}</a></div>
                        </div>  
                     {/foreach}   
                        <div class="clear"></div>
                  </div>
                </div>
                <div class="logo-photos">
                   {include file="logopartner.tpl"} 
        		</div>	 
            </div>    
	</div>
    
    
{include file="footer.tpl"}

